Modal

功能說明

1. Hero Image
2. modal開啟按鈕
3. modal關閉按鈕

CSS重點

• .modal-overlay中控制了modal的屬性，並利用visibility: hidden來隱藏modal :

...
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(73, 166, 233, 0.5);
  display: grid;
  place-items: center;
  transition: var(--transition);
  visibility: hidden;
  z-index: -10;
}
...

• 但.open-modal卻將visibility屬性設為visible，讓其顯示 :

...
.open-modal {
  visibility: visible;
  z-index: 10;
}
...

• 結論 :
  只要在HTML的modal標籤中加入open-modal的Class，就能顯示modal；反之，只要移除open-modal，就能隱藏modal

HTML重點

1. Hero Image :

   <!-- 匯入背景圖片 -->
   <header class="hero">
       <!-- 白底方格 -->
       <div class="banner">
           <!-- 標題 -->
           <h1>modal project</h1>
           <!-- 開啟按鈕 -->
           <button class="btn modal-btn">
                 open modal
           </button>
       </div>
   </header>
   

將開啟按鈕的Class設為modal-btn

2. modal視窗 :

   <!-- modal開啟後之背景 -->
   <div class="modal-overlay">
       <!-- modal開啟後之白底方格 -->
       <div class="modal-container">
           <!-- modal內容 -->
           <h3>model content</h3>
           <!-- 關閉按鈕 -->
           <button class="close-btn">
               <!-- 使用Font Awesome的Icon -->
               <i class="fas fa-times"></i>
           </button>
       </div>
   </div>
   

將關閉按鈕的Class設為close-btn

JavaScript重點

1. 利用class="modal-btn"去抓取開啟按鈕

   const modalBtn = document.querySelector(".modal-btn"); 
   

2. 利用class="close-btn"去抓取關閉按鈕

   const closeBtn = document.querySelector(".close-btn");
   

3. 利用class="sidebar"去抓取整個modal元素

   const modal = document.querySelector(".modal-overlay");
   

4. 將開啟按鈕新增點擊事件，進而顯示modal

   modalBtn.addEventListener('click',function(){
       modal.classList.add("open-modal");
   });
   

5. 將關閉按鈕新增點擊事件，進而隱藏modal

   closeBtn.addEventListener('click',function(){
       modal.classList.remove("open-modal");
   });
   

參考與引用來源

1. Hero Image介紹
2. Modal簡介